const vm = new Vue({
  el: "#app",
  data() {
    return {
      mySwiper: null,
      wallpaperSwiper: null,
      menuList: [
        {
          id: 0,
          name: "首页",
        },
        {
          id: 1,
          name: "最新动态",
        },
        {
          id: 2,
          name: "照片墙",
        },
        {
          id: 3,
          name: "关注夏栀",
        },
      ],
      activeMenu: 0,
      photoList: [
        {
          id: 0,
          url: "../images/wallpapers/wall01.jpg",
          name: "xzxz",
        },
        {
          id: 1,
          url: "../images/wallpapers/wall02.jpg",
          name: "xzxz",
        },
        {
          id: 2,
          url: "../images/wallpapers/wall03.jpg",
          name: "xzxz",
        },
        {
          id: 3,
          url: "../images/wallpapers/wall04.jpg",
          name: "xzxz",
        },
        {
          id: 4,
          url: "../images/wallpapers/wall05.jpg",
          name: "xzxz",
        },
        {
          id: 5,
          url: "../images/wallpapers/wall06.jpg",
          name: "xzxz",
        },
        {
          id: 6,
          url: "../images/wallpapers/wall07.jpg",
          name: "xzxz",
        },
      ],
    }
  },
  methods: {
    // 开启swiper
    setSwiper() {
      this.mySwiper = new Swiper(".swiper", {
        direction: "vertical", // 垂直切换选项
        parallax: true, //时差滚动
        loop: false, // 循环模式选项
        preloadImages: false, //强制所有图片初始化
        mousewheel: true, //鼠标滚轮
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },
        on: {
          slideChange: function () {
            vm.activeMenu = this.realIndex
          },
        },
      })
    },
    startWallPaper() {
      this.wallpaperSwiper = new Swiper(".swiper-wallpaper", {
        slidesPerView: 1,
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        autoplay: true,
        pagination: {
          el: ".swiper-pagination-wallpaper",
          clickable: true,
        },
      })
    },
    // 封面标题交错排列
    setOverlap(dom) {
      dom.innerHTML = dom.textContent
        .split("")
        .map((t, i, arr) => `<span style='z-index:${arr.length - i}'>${t}</span>`)
        .join("")
    },
    // 菜单点击交互
    handleMenuClick(menu) {
      this.activeMenu = menu.id
      // 跳转到对应的swiper
      this.mySwiper.slideTo(menu.id)
    },
  },
  watch: {
    activeMenu: {
      handler(val) {
        document.title = "夏栀天下第一 | " + this.menuList[val].name
      },
      immediate: true,
    },
  },
  mounted() {
    const overlapDom = document.querySelector(".xz-overlap")
    this.setOverlap(overlapDom)
    this.setSwiper()
    this.startWallPaper()
  },
})
